<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-6">
        <button @click="view = view === 'v-a' ? 'v-b' : 'v-a'">toggle</button>
        <transition name="component-fade" mode="out-in">
            <component v-bind:is="view"></component>
        </transition>
    </div>
    <script>
        new Vue({
            el: '#app-6',
            data: {
                view: 'v-a'
            },
            components: {
                'v-a': {
                    template: '<div>Component A</div>'
                },
                'v-b': {
                    template: '<div>Component B</div>'
                }
            }
        })
    </script>
    <style>
        .component-fade-enter-active,
        .component-fade-leave-active {
            transition: opacity .3s ease;
        }

        .component-fade-enter,
        .component-fade-leave-to
        /* .component-fade-leave-active for below version 2.1.8 */

        {
            opacity: 0;
        }
    </style>
</body>

</html>